<template>
	<view class="box">
		<u-navbar title="提现" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" rightText="提现记录" @leftClick="leftClick" @rightClick="right"
			bgColor="#E0DDDA"></u-navbar>
		<view class="show_crad">
			<view class="show_crad_txtone">
				到账银行卡
			</view>
			<view class="show_crad_name" @click="tip2">
				<text>{{banklist.length?defbank.account_bank+"****"+defbank.account.slice(-4) : "未绑定银行卡"}}</text>
				<uni-icons type="right" color="#A7A4AD"></uni-icons>
			</view>
		</view>
		<view class="main">
			<view class="main_tit">
				提现金额
			</view>
			<view class="main_wrap">
				<text>￥</text>
				<input type="number" :value="num" placeholder="" @input="getnum" />
			</view>
			<view class="main_bottom">
				<text>可提金额￥{{xs.balAmount}}</text>
				<view class="main_bottom_txt" @click="num=xs.balAmount">
					全部提现
				</view>
			</view>
			<view class="tip">
				<rich-text class="s" :nodes="rule"></rich-text>
			</view>
			<view class="btn" @click="tip">
				确定提现
			</view>
		</view>
		<u-popup :show="selshow" :round="10" mode="bottom" @close="close" @open="open">
			<view class="rule_content">
				<view class="rule_tit">
					<uni-icons type="left" color="#333" class="icon" @click="close()"
						size="30"></uni-icons><text>选择银行卡</text>
				</view>
				<view class="max_wrap">
					<view class="cardlist">
						<radio-group change="fl" @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in banklist"
								:key="item.id">
								<view class="card_item">
									<view class="card_name">{{item.account_bank}}(****{{item.account.slice(-4)}})
									</view>
									<view>
										<radio :value="item.id.toString()" activeBackgroundColor="#A68A64" />
									</view>
								</view>

							</label>
						</radio-group>
					</view>
					<view class="cardlist_bottom" @click="gobindbankcard">
						<view class="addcard">
							<image src="../../static/icon/addbank1.png" mode=""></image>
							<text>添加银行卡提现</text>
						</view>
						<uni-icons type="right" color="#333" size="24"></uni-icons>
					</view>
				</view>

			</view>
		</u-popup>
		<u-popup :show="showpass" mode="center" @close="showpass=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#A68A64" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="showpass=false,password=''">
						取消
					</view>
					<view class="other_btn2" @click="submit">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">您还未添加添加银行卡</text>

				<view class="prompt_ntm" @click="tobindbankcard()">
					<text>去添加</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		banklist,
		WithdrawInfo,
		bankdetail,
		withdrawDo,
		myAccount,
		accountWithdraw,
		cashWithdraw
	} from "../../api/wallet.js"
	export default {
		data() {
			return {
				selshow: false,
				ishave: false, //是否有银行卡
				num: 0,
				cannum: 99,
				tipShow: false,
				items: [{
						value: "1",
						name: '招商银行（****5294）',
						checked: 'true'
					},
					{
						value: "2",
						name: '中国银行（****5294）'
					},
					{
						value: "3",
						name: '交通银行（****5294）'
					},
					{
						value: "4",
						name: '平安银行（****5294）'
					},
					{
						value: "5",
						name: '交通银行（****5294）'
					},
					{
						value: "6",
						name: '平安银行（****5294）'
					},

				],
				current: 0,
				selcardval: null,
				info: {},
				banklist: [],
				defbank: [],
				showpass: false,
				password: "",
				xs:{},
				rule:""
			}
		},
		onLoad() {
			this.getbanklist()
			this.getWithdrawInfo()
			this.getmyAccount()
			this.getrule()
		},
		onShow() {
			this.tipShow=false
			this.getbanklist()
		},
		computed: {

			daozhangprice() {
				const price = Number(this.num)
				const fl = Number(this.info.fee) / 100
				return price - price * fl
			}
		},
		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if ( canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			},
			getrule(){
				cashWithdraw().then(res=>{
					this.rule=res.data.content
				})
			},
			getmyAccount(){
				myAccount().then(res=>{
				
					this.xs=res.data.xs
				
					console.log(this.isopen,"000")
					console.log(res,"账户")
				})
			},
			tip() {
				if (!this.banklist.length) {
					this.tipShow = true
				} else if(this.num==0) {
					uni.$u.toast("提现金额不能为0")
				}else if(this.num<Number(this.info.min)){
					uni.$u.toast("最小提现金额为"+this.info.min)
				}else{
					this.showpass = true
				}

			},
			tip2() {
				if (!this.banklist.length) {
					this.tipShow = true
				} else {
					this.selshow = true
				}
			},
			submit() {
				if(this.password.length<6){
					uni.$u.toast("请输入完整")
				}else{
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					accountWithdraw({
						card_id: this.defbank.id,
						amount: this.num,
						password: this.password
					}).then(res => {
						uni.hideLoading()
						this.password = ""
						this.showpass = false
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pagesMy/mywallet/newmywallet"
								})
							}, 1500)
						}
						uni.$u.toast(res.msg)
						console.log(res)
					})
				}
				

			},
			getbanklist() {
				banklist({
					wallet_type: "1"
				}).then(res => {
					this.banklist = res.data
					if (this.banklist.length) {
						this.tipShow = false
					}
					this.defbank = res.data[0]
					console.log(res.data, "银行卡")
				})
			},
			getWithdrawInfo() {
				WithdrawInfo().then(res => {
					console.log(res)
					this.info = res.data
				})
			},
			right() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/withlisttwo"
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.selshow = false
				// console.log('close');
			},
			getnum(e) {
				this.num = e.detail.value
			},
			gobindbankcard() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/bindbankcard"
				})

			},
			radioChange: function(evt) {
				console.log(evt)
				console.log(evt.detail.value)
				this.selcardval = evt.detail.value
				bankdetail({
					id: this.selcardval
				}).then(res => {
					this.selshow = false
					this.defbank = res.data
					console.log(res)
				})
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			tobindbankcard() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/bindbankcard"
				})
			},

			// selcard() {
			// 	if (this.banklist.length) {
			// 		this.selshow = true
			// 	} else {
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: '您还未绑定银行卡',
			// 			confirmText: "去绑定",
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					uni.navigateTo({
			// 						url: "/pagesMy/mywallet/bindbankcard"
			// 					})
			// 				} else if (res.cancel) {
			// 					console.log('用户点击取消');
			// 				}
			// 			}
			// 		});
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #E0DDDA;
	}


	/deep/ .u-navbar__content__right__text {
		color: #666;
	}

	.show_crad {
		width: 670rpx;
		margin: 0 auto;
		margin-top: 40rpx;

		.show_crad_txtone {
			font-weight: 400;
			font-size: 32rpx;
			color: #333;
		}

		.show_crad_name {
			font-weight: 400;
			font-size: 32rpx;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.main {
		width: 670rpx;
		height: 342rpx;
		background: #f2f2f2;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto;
		margin-top: 56rpx;

		.main_tit {
			padding-top: 34rpx;
			margin-left: 34rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333;
		}

		.main_wrap {
			width: 598rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: flex-end;

			>text {
				font-weight: 400;
				font-size: 72rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			>input {
				font-weight: 400;
				font-size: 108rpx;
				color: #333;
			}
		}

		.main_bottom {
			width: 598rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			padding-bottom: 20rpx;
			>text {
				font-size: 26rpx;
				color: #333;
			}

			.main_bottom_txt {
				font-weight: 400;
				font-size: 26rpx;
				color: #A68A64;
				margin-left: 20rpx;
			}
		}
	}

	.tip {
		margin-top: 44rpx;

		>text {
			font-weight: 400;
			font-size: 24rpx;
			color: #A6A5AF !important;
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-top: 150rpx;
	}

	.rule_content {
		padding-top: 30rpx;
		width: 750rpx;
		height: 650rpx;
		background-color: #E0DDDA;
		border-radius: 10rpx;

		.rule_tit {
			font-weight: 500;
			font-size: 36rpx;
			color: #333;
			text-align: center;
			display: flex;
			align-items: center;

			// justify-content: center;
			.icon {
				padding-right: 208rpx;
				margin-left: 48rpx;
			}
		}

		.max_wrap {
			width: 682rpx;
			height: 452rpx;
			background: #f2f2f2;
			margin: 0 auto;
			margin-top: 40rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.cardlist {
			width: 602rpx;
			margin: 0 auto;
			height: 380rpx;
			overflow-y: auto;

			.card_item {
				display: flex;
				width: 602rpx !important;
				height: 94rpx;
				align-items: center;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);

				.card_name {
					width: 500rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333;

				}
			}
		}

		.cardlist_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.addcard {
				display: flex;
				align-items: center;
				margin-left: 44rpx;

				>image {
					width: 34rpx;
					height: 34rpx;
					display: block;
					margin-top: 6rpx;
					margin-right: 10rpx;
				}

				>text {
					font-size: 32rpx;
					color: #333;
					line-height: 52rpx;
				}
			}
		}
	}

	.uni-label-pointer {
		width: 602rpx;
	}

	/deep/ .uni-radio-group {
		overflow: auto;
	}


	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
	}

	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
	
		.code_input {
			margin: 0 auto;
		}
	
		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;
	
			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}
	
			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	
		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		/deep/.u-code-input__item{
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}
		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}
	.s{
		color: #A6A5AF !important;
	}
</style>